<!--
 * @Author: ZhaoZhiqi
 * @Date: 2024-07-04 13:59:13
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2024-09-03 11:05:03
 * @Description: Tabs

 使用默认高度时，需要在使用时加【style="flex: auto; overflow: auto"】属性，如下：
 <Tabs style="flex: auto; overflow: auto" v-model="index">

 * @FilePath: \charging-mini\src\components\Tabs.vue
-->
<template>
    <div class="tabs-container" :style="{ height }">
        <div id="tabsWrapper" class="tabs-wrapper" :style="{ backgroundColor: is_white ? '#fff' : 'transparent' }">
            <div class="tab-item" :class="{ active: value === index }" v-for="(item, index) in list" :key="index" @click="change(index)">{{ item }}</div>

            <!-- 滑块 -->
            <div class="tabs-slider" :style="{ left: left + 'px' }"></div>
        </div>

        <!-- 内容 -->
        <div class="tabs-box">
            <div class="tabs-window" :style="{ width: `${100 * list.length}%`, 'margin-left': `-${100 * value}%` }">
                <!-- 每个内容块固定宽高的窗口，确保实际内容在这个容器内上下滚动，不会出现切换tab时异常 -->
                <div class="tab-content-window" :style="{ width: 100 / list.length + '%' }" v-for="(item, index) in list" :key="index">
                    <slot :index="index"></slot>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
const app = getApp();
export default {
    props: {
        value: {
            type: Number,
            default: 0,
        },
        list: {
            type: Array,
            default: [],
        },
        is_white: {
            type: Boolean,
            default: false,
        },
        height: {
            type: String,
            default: "100%",
        },
    },
    data() {
        return {
            show: false,
            widthList: [],
        };
    },
    computed: {
        left() {
            let left = 0;
            if (this.widthList.length) {
                for (let i = 0; i <= this.value; i++) {
                    if (i == this.value) {
                        left += (this.widthList[i] - 16) / 2;
                    } else {
                        left += this.widthList[i];
                    }
                }
            }
            return left;
        },
    },
    mounted() {
        const query = uni.createSelectorQuery().in(this);
        //获取宽度
        query
            .selectAll(".tab-item")
            .fields(
                {
                    size: true,
                },
                (res) => {
                    this.widthList = res.map((item) => item.width);
                }
            )
            .exec();
    },
    methods: {
        change(index) {
            this.$emit("input", index);
        },
    },
};
</script>
<style scoped lang="less">
.tabs-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: auto;
    overflow: hidden;
    .tabs-wrapper {
        width: 100%;
        position: relative;
        display: flex;
        align-items: center;
        height: 80rpx;
        flex: none;
        .tab-item {
            height: 100%;
            font-size: 28rpx;
            line-height: 1;
            color: #9a9a9a;
            padding: 0 30rpx;
            display: flex;
            align-items: center;
            &.active {
                color: #333;
                font-weight: bold;
            }
        }
    }
    .tabs-box {
        position: relative;
        width: 100%;
        flex: auto;
        overflow: hidden;
        .tabs-window {
            display: flex;
            height: 100%;
            transition-duration: 0.2s;
            overflow: hidden;
            .tab-content-window {
                overflow-y: auto;
                height: 100%;
            }
        }
    }
    .tabs-slider {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 16px;
        height: 6rpx;
        border-radius: 4rpx;
        background-color: #08bfa8;
        transition-duration: 0.2s;
    }
}
</style>
